import { Typography, Card, Row, Input, Button, message } from "ant-design-vue";

import { defineComponent, reactive } from "vue";
import { useRouter } from "vue-router";
import "./index.less";

import { localOperation, subjectDistribution, filterUnit } from "@/utils";
import config from "@/utils/config";

const { subject, title } = config;

const { Title, Text, Paragraph } = Typography;


const Home = defineComponent({
  setup() {
    const titleStore = localOperation.get("title");
    const $router = useRouter();
    const state: any = reactive({
      defaultData: JSON.parse(localOperation.get("gatherError") as any) || [],
      isActive: 0,
      gatherError: [],
      gatherTime: [],
      isSuspend: {
        off: false,
        frequency: 0,
        duration: 0,
      },
      fraction: 0,
      over: false
    });

    state.defaultData = state.defaultData.map((item: any) => {
      item.value = ''
      item.text = ''
      item.remainder && (item.remainder = '')
      return item
    })
    console.log(state.defaultData)
    const submit = (item: any) => () => {
      if (!item.value) {
        message.error('请填写答案再提交！')
        return
      }
      if (item.type === 5) {
        if (
          +item.value === item.result.merchant &&
          +item.remainder === item.result.remainder
        ) {
          state.fraction += Number(item.fraction);
          item.text = '答对了，恭喜你！'
        } else {
          state.gatherError.push(item);
          item.text = `错误，正确答案：商:${item.result.merchant} ,余${item.result.remainder}`
        }
      } else {
        if (+item.value === item.result) {
          state.fraction += Number(item.fraction);
          item.text = '答对了，恭喜你！'
        } else {
          state.gatherError.push(item);
          item.text = `错误，正确答案：${item.result} `
        }
      }
      /* 无论对错，答题后进入下一题 */
      state.isSuspend.off = false;

    };



    return () => (
      <div class="answers-container">
        {!state.over && (
          <> <Title>{titleStore || title}</Title>
            {state.defaultData.map((item: any, index: number) => {
              return (
                state.isActive === index && (
                  <Card
                    style={{ margin: '20px 0' }}
                    title={
                      <Text style={{ fontSize: '20px' }}>
                        第{index + 1}题/共{state.defaultData.length}题
                  </Text>
                    }
                  >
                    <Row justify="start" align="middle" style={{ marginBottom: '20px' }}>
                      <Text style={{ fontSize: '30px' }}>
                        {item.L}
                        {filterUnit(item.type)}
                        {item.R}=
                  </Text>
                      <Input style={{ fontSize: '30px' }} v-model={[item.value, "value"]} onPressEnter={submit(item)} />

                      {item.type === 5 && (
                        <>
                          ... <Input  style={{ fontSize: '30px' }}  v-model={[item.remainder, "value"]} onPressEnter={submit(item)} />
                        </>
                      )}

                      <Button onClick={submit(item)}>提交</Button>
                    </Row>
                    {item.text && (
                      <Row justify="start" align="middle">
                        <Text style={{ fontSize: '26px' }}>{item.text}</Text>
                        <Button onClick={() => {

                          state.isActive = state.isActive + 1
                          if (state.defaultData.length - 1 < state.isActive) {

                            state.over = true
                          }
                        }}>
                          下一题
                   </Button>
                      </Row>
                    )}

                  </Card>
                )
              );
            })}</>
        )}

        {
          state.over && (
            <>
              <Title>错题已全部订正完成！</Title>
              <Button onClick={() => {
                $router.replace({ path: '/' })
              }} class="agin" type="danger">再来一次</Button>
            </>
          )
        }

      </div>
    );
  },
});
export default Home;
